<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<script>
			function getByClass(oParent, sClass) //第一个参数决定了从哪一个父级去选元素
			{
				var aResult = []
				var aEle = oParent.getElementsByTagName('*');
				for(var i = 0; i < aEle.length; i++) {
					if(aEle[i].className == sClass) {
						aResult.push(aEle[i]);
					}
				}
				return aResult;
			}
			window.onload = function() {
				var oDiv1 = document.getElementById('div1');
				var aDiv1 = oDiv1.getElementsByTagName('div');
				var aIpt1 = aDiv1[0].getElementsByTagName('input');
				var aBtn1 = aDiv1[0].getElementsByTagName('button');
				aBtn1[0].onclick = function() {
					aIpt1[0].setAttribute('value', '修改完毕')
				}
				aBtn1[1].onclick = function() {
					alert(aIpt1[0].getAttribute('value'))
				}
				aBtn1[2].onclick = function() {
					aIpt1[0].removeAttribute('value')
				}

				var oDiv2 = document.getElementById('div2');
				var aDiv2 = oDiv2.getElementsByTagName('div');
				var aLia2 = aDiv2[0].getElementsByTagName('li');
				var aBtn2 = aDiv2[0].getElementsByTagName('button');
				aBtn2[0].onclick = function() {
					for(var i = 0; i < aLia2.length; i++) {
						if(aLia2[i].className == 'list-group-item class') {
							aLia2[i].style.background = 'yellow';
						}
					}
				}
				var aBox2 = getByClass(aDiv2[0], 'list-group-item class');
				aBtn2[1].onclick = function() {
					for(var i = 0; i < aBox2.length; i++) {
						aBox2[i].style.background = '#F1F1F1';
					}
				}
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、DOM方式操作元素属性<br><br>
			<div class="box box-re">
				例1：setAttribute<br><br>
				<input type="text" class="form-control" value="还没修改" readonly /><br><br><button class="btn btn-info">修改输入框内容</button> <code>aIpt1[0].setAttribute('value', '更改完毕')</code><br><br><button class="btn btn-info">读取输入框内容</button> <code>aIpt1[0].getAttribute('value')</code><br><br><button class="btn btn-info">移除输入框内容</button> <code>aIpt1[0].removeAttribute('value')</code>
			</div>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、DOM元素灵活查找<br><br>
			<div class="box box-re">
				例1：选出所有元素 通过className条件筛选<br><br>
				<ul class="list-group">
					<li class="list-group-item">无</li>
					<li class="list-group-item class">class</li>
					<li class="list-group-item">无</li>
					<li class="list-group-item class">class</li>
					<li class="list-group-item class">class</li>
				</ul>
				<button class="btn btn-info">修改指定class的背景颜色</button> 未封装<br><br>
				<button class="btn btn-info">修改指定class的背景颜色</button> 已封装
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>元素属性操作：</b>第一种：<code>oDiv.style.display='block';</code> 第二种：<code>oDiv.style['display']='block';</code> 第三种：<code>DOM方式操作元素属性</code></p>
		</div>

	</BODY>

</HTML>